<template>
    <div style="height: 100vh;width: 100%;">
        <div style="display:flex; padding-top: 35px; padding-left: 25px;">
            <el-button @click="goBack" type="plain" text>
                <el-icon>
                    <Back />
                </el-icon>返回首页
            </el-button>
        </div>
        <div class="common-layout">
            <el-container>
                <el-header class="head-container">
                    <div class="header-content">
                        <div class="avatar-container">
                            <el-avatar :size="190" :src="circleUrl" />
                        </div>
                        <div class="info-item">
                            <span style="font-family: SimHei; font-size: 25px; font-weight: bold; margin-top: 20px;">
                                {{ UserFormData.userName }}
                            </span>
                            <el-text class="mx-1" type="info" style="margin-top: 5px;">
                                账号：{{ UserFormData.userAccountNumber }}
                            </el-text>

                        </div>
                    </div>
                </el-header>
                <el-container style="padding-top: 20px;">

                    <el-aside class="aside-container">
                        <div style="font-size: 20px; font-weight: bold; margin-top: 15px; margin-left: 15px;">个人中心</div>
                        <el-divider />
                        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleMenuSelect">
                            <el-menu-item index="1">
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>个人信息</span>
                            </el-menu-item>
                            <el-menu-item index="2">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>我的订单</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <el-icon>
                                    <ChatLineSquare />
                                </el-icon>
                                <span>我的评论</span>
                            </el-menu-item>
                        </el-menu>
                    </el-aside>
                    <el-main style="background-color: #FFFFFF; border-radius: 5px;box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);">
                        <div v-if="showPersonalInfo">
                            <PersonalInfo />
                        </div>
                        <div v-if="showPersonalOrders">
                            <PersonalOrders />
                        </div>
                        <div v-if="showPersonalComment">
                            <PersonalComment />
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { userStore } from '@/stores/userInfoStore.js';
import PersonalComment from '@/components/PersonalComment.vue';
import PersonalInfo from '@/components/PersonalInfo.vue';
import PersonalOrders from '@/components/PersonalOrders.vue';

const userStoreInfo = userStore();

const router = useRouter();

const state = reactive({
  circleUrl:
    '/pic/ruiya用户默认头像.png',
})
  
  const UserFormData = ref({
    id: userStoreInfo.userInfo.id,
    userAccountNumber: null,
    phoneNumber: null,
    userName: null,
    useLevel: null
})

const goBack = () => {
    router.push("/index");
}

const showPersonalInfo = ref(true);
const showPersonalOrders = ref(false);
const showPersonalComment = ref(false);

// 组件切换
const activeIndex = ref(localStorage.getItem('activeIndex') || '1');
// 切换到个人信息
const goToPersonalInfo = () => {
  activeIndex.value = '1';
  localStorage.setItem('activeIndex', '1');
  showPersonalInfo.value = true;
  showPersonalOrders.value = false;
  showPersonalComment.value = false;
};

// 切换到我的订单
const goToPersonalOrders = () => {
    activeIndex.value = '2';
    localStorage.setItem('activeIndex', '2');
  showPersonalInfo.value = false;
  showPersonalOrders.value = true;
  showPersonalComment.value = false;
};

// 切换到我的评论
const gotoPersonalComment = () => {
    activeIndex.value = '3';
    localStorage.setItem('activeIndex', '3');
  showPersonalInfo.value = false;
  showPersonalOrders.value = false;
  showPersonalComment.value = true;
};

// 菜单选择处理
const handleMenuSelect = (index) => {
  activeIndex.value = index;
  localStorage.setItem('activeIndex', index);

  // 根据索引切换组件
  showPersonalInfo.value = index === '1';
  showPersonalOrders.value = index === '2';
  showPersonalComment.value = index === '3';
};

const { circleUrl } = toRefs(state)

onMounted(() => {
  const savedIndex = localStorage.getItem('activeIndex') || '1';
  activeIndex.value = savedIndex;

  // 根据索引设置组件显示状态
  showPersonalInfo.value = savedIndex === '1';
  showPersonalOrders.value = savedIndex === '2';
  showPersonalComment.value = savedIndex === '3';

  // 用户信息初始化保持不变
  UserFormData.value = userStoreInfo.userInfo;

})
</script>

<style scoped>
.common-layout {
  padding: 30px 200px;
  height: calc(100%-82px);

  @media (max-width: 768px) {
    padding: 0 10px;
  }
}

.head-container {
    display: flex;
    height: 240px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.aside-container {
    margin-right: 20px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);
    width: 260px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;

}

.avatar-container {
  flex-shrink: 0;
}

.info-item {
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

</style>
